import React from 'react';
import intl from '../../../../../../../../../locale';

export default class IpList extends React.Component {
  state = {
    isShowMore: false,
    hasMore: false,
  };

  componentDidMount() {
    const { offsetWidth, scrollWidth } = this.ipRef;
    if (scrollWidth > offsetWidth) {
      this.setState({
        hasMore: true,
      });
    }
  }

  render() {
    const { text } = this.props;
    const { hasMore, isShowMore } = this.state;
    return (
      <div className="ip-list">
        <div
          className={`ip-list-left ${isShowMore ? 'break' : ''}`}
          ref={(ref) => {
            this.ipRef = ref;
          }}
        >
          {text}
        </div>
        <div
          onClick={() => {
            this.setState({
              isShowMore: !isShowMore,
            });
          }}
          className="ip-list-right"
          style={{ display: hasMore ? 'block' : 'none' }}
        >
          {isShowMore
            ? intl.get({
                id: 'code-assets.settingsDeploykeys.containers.ipList.HideMore',
                defaultMessage: '收起更多',
              })
            : intl.get({
                id: 'code-assets.settingsDeploykeys.containers.ipList.ExpandMore',
                defaultMessage: '展开更多',
              })}
        </div>
      </div>
    );
  }
}
